import { AuthFuncMenu } from "@/api/interface/auth/funcMenu";
import { customTable } from "@/components/ProTable/interface";
import { ProTableValue } from "@/interface/public";
import { renderRowInput } from "@/utils/render";

/**
 * @name 菜单路径
 */

export function useDataGrid(proTableBox: ProTableValue) {
  // 新增字段
  let form = {
    value: "",
    title: "",
    remark: ""
  };

  // 是否可编辑
  const isEdit = (row: AuthFuncMenu.ResSearchConfig) => row.status === 0;

  let dataGrid = reactive<customTable>({
    initParam: {
      id: "MES"
    },
    // 表格配置项
    columns: [
      { prop: "operation", label: "operation", fixed: "left", width: 160 },
      {
        label: "路径说明",
        prop: "title",
        render: scope => renderRowInput(scope, "title", "路径说明", submitForm, isEdit),
        required: true
      },
      {
        label: "值",
        prop: "value",
        render: scope => renderRowInput(scope, "value", "值", submitForm, isEdit),
        required: true
      },
      {
        label: "备注",
        prop: "remark",
        render: scope => renderRowInput(scope, "remark", "备注", submitForm, isEdit)
      }
    ],
    headButtonList: [
      {
        label: "新增",
        type: "primary",
        icon: "Plus",
        methods: () => add()
      }
    ],
    rowButtonList: [
      {
        label: "",
        type: "danger",
        icon: "svg-del",
        tooltip: "删除",
        hide: row => isAddFlag && row.status === 0,
        methods: (row: AuthFuncMenu.ResSearchConfig) => {
          const params = { id: row.id };
          useHandleData(funcDicRemove, params, `删除图标 【${row.title}】 `, proTableBox.value?.getTableList);
        },
        attrs: {
          link: true
        }
      },
      {
        label: "",
        type: "primary",
        tooltip: "启用",
        icon: "svg-start2",
        hide: row => row.status === 1 && row?.isAddFlag !== "true",
        methods: (row: AuthFuncMenu.ResSearchConfig) => {
          const params = { id: row.id };
          useHandleData(
            funcDicEnable,
            params,
            `${transitionLanguages("table", "启用")}【${row.title}】`,
            proTableBox.value?.getTableList
          );
        },
        attrs: {
          link: true
        }
      },
      {
        label: "",
        type: "danger",
        icon: "svg-disable",
        tooltip: "禁用",
        hide: row => row.status === 0 && row?.isAddFlag !== "true",
        methods: (row: AuthFuncMenu.ResSearchConfig) => {
          const params = { id: row.id };
          useHandleData(
            funcDicDisable,
            params,
            `${transitionLanguages("table", "禁用")}【${row.title}】`,
            proTableBox.value?.getTableList
          );
        },
        attrs: {
          link: true
        }
      }
    ]
  });

  /**
   * @description: 表单提交
   * @return {*}
   */
  const submitForm = async () => {
    const form: AuthFuncMenu.ReqSaveConfig = proTableBox.value?.tableData.find(item => item.isAddFlag || item["edit"]);
    if (!form) return;
    const params = JSON.parse(JSON.stringify(form));
    params.value = JSON.stringify(params.value);
    await funcDicSaveSet(form);
    elMessage("操作成功");
    proTableBox.value?.getTableList();
  };

  const dataCallBack = (data: AuthFuncMenu.ResSearchConfig[]) => {
    return data;
  };

  /**
   * @description: 表格增加钩子
   * @return {*}
   */
  const { isAddFlag, requiredField, add, tableBasicBtn } = useTableAdd(
    dataGrid.columns,
    proTableBox,
    form,
    submitForm,
    () => null
  );
  onBeforeMount(() => {
    const str = "title,value";
    dataGrid.rowButtonList?.unshift(...tableBasicBtn(str, isEdit));
  });

  return {
    dataGrid,
    dataCallBack,
    isAddFlag,
    requiredField
  };
}
